<template>
  <PageWrapper
    :title="data.sysTenant.name"
    contentBackground
    :content="data.sysTenant.description"
    contentClass="p-4"
  >
    <div class="pt-4 m-4 desc-wrap">
      <a-card :title="data.sysTenant.id" class="my-5">
        <a-descriptions size="small" :column="2" title="基本信息" bordered>
          <a-descriptions-item label="租户编码">
            {{ data.sysTenant.tenantCode }}
          </a-descriptions-item>
          <a-descriptions-item label="联系方式">
            {{ data.sysTenant.tel }}
          </a-descriptions-item>
          <a-descriptions-item label="电话">
            {{ data.sysTenant.phone }}
          </a-descriptions-item>
          <a-descriptions-item label="传真">
            {{ data.sysTenant.fax }}
          </a-descriptions-item>
          <a-descriptions-item label="生效日期">
            {{ data.sysTenant.address }}
          </a-descriptions-item>
          <a-descriptions-item label="是否可用">
            <Tag v-if="data.sysTenant.enable" color="#87d068" class="mb-2"> 可用 </Tag>
          </a-descriptions-item>
          <a-descriptions-item label="到期时间">
            {{ data.sysTenant.timeExpiration }}
          </a-descriptions-item>
        </a-descriptions>
        <a-divider />
        <a-descriptions v-if="data.sysTenant.sysTenantExtWeb" :column="3" title="网站信息">
          <a-descriptions-item label="LOGO">
            <Avatar :size="70" :src="data.sysTenant.sysTenantExtWeb.logo" />
          </a-descriptions-item>
          <a-descriptions-item label="登录页面插画">
            <Image
              :width="200"
              :height="200"
              :src="data.sysTenant.sysTenantExtWeb.inset"
              fallback=""
            />
          </a-descriptions-item>
          <a-descriptions-item label="登录页面背景">
            <Image
              :width="200"
              :height="200"
              :src="data.sysTenant.sysTenantExtWeb.loginBackground"
              fallback=""
            />
          </a-descriptions-item>
          <a-descriptions-item label="引导页背景">
            <Image
              :width="200"
              :height="200"
              :src="data.sysTenant.sysTenantExtWeb.guidePageBackground"
              fallback=""
            />
          </a-descriptions-item>
          <a-descriptions-item label="租户标题">
            {{ data.sysTenant.sysTenantExtWeb.title }}
          </a-descriptions-item>
          <a-descriptions-item label="标语">
            {{ data.sysTenant.sysTenantExtWeb.slogan }}
          </a-descriptions-item>
          <a-descriptions-item label="域名">
            {{ data.sysTenant.sysTenantExtWeb.domainName }}
          </a-descriptions-item>
          <a-descriptions-item label="引导页是否开启">
            <Tag v-if="data.sysTenant.sysTenantExtWeb.enableGuidePage" color="#87d068" class="mb-2">
              开启
            </Tag>
          </a-descriptions-item>
        </a-descriptions>
        <a-divider />
        <a-descriptions v-if="data.sysTenant.sysTenantExtBusiness" :column="3" title="商务信息">
          <a-descriptions-item label="企业名称">
            {{ data.sysTenant.sysTenantExtBusiness.firmName }}
          </a-descriptions-item>
          <a-descriptions-item label="统一社会信用代码">
            {{ data.sysTenant.sysTenantExtBusiness.creditCode }}
          </a-descriptions-item>
          <a-descriptions-item label="法定代表人">
            {{ data.sysTenant.sysTenantExtBusiness.legalPerson }}
          </a-descriptions-item>
          <a-descriptions-item label="行政区划">
            {{ data.sysTenant.sysTenantExtBusiness.administrativeDivision }}
          </a-descriptions-item>
          <a-descriptions-item label="商务区划">
            {{ data.sysTenant.sysTenantExtBusiness.businessArea }}
          </a-descriptions-item>
          <a-descriptions-item label="商务负责人">
            {{ data.sysTenant.sysTenantExtBusiness.businessHead }}
          </a-descriptions-item>
          <a-descriptions-item label="开户账号">
            {{ data.sysTenant.sysTenantExtBusiness.openBankAccount }}
          </a-descriptions-item>
          <a-descriptions-item label="开户账号">
            {{ data.sysTenant.sysTenantExtBusiness.bankAccountPerson }}
          </a-descriptions-item>
          <a-descriptions-item label="开户行">
            {{ data.sysTenant.sysTenantExtBusiness.openBank }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </div>
  </PageWrapper>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue';
  import { useRoute } from 'vue-router';
  import { PageWrapper } from '/@/components/Page';
  //import { useTenantStore, getTenantById } from '/@/store/modules/tenant';
  import { sysTenantGetApi } from '/@/api/baas/sysTenant';
  import { number } from 'vue-types';
  import {
    Tag,
    Divider,
    Card,
    Empty,
    Descriptions,
    Steps,
    Tabs,
    Avatar,
    Image,
  } from 'ant-design-vue';

  export default defineComponent({
    name: 'TenantDetail',
    components: {
      PageWrapper,
      Tag,
      Avatar,
      Image,
      [Divider.name]: Divider,
      [Card.name]: Card,
      //Empty,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
    },
    props: {
      id: number,
      // eslint-disable-next-line vue/require-prop-types
    },
    setup() {
      //获得路由
      const route = useRoute();
      //获取id
      const id = ref(route.query?.id);

      let data = reactive({ sysTenant: {} });

      //定义 获取数据
      const get = async function () {
        const resData = await sysTenantGetApi(id.value);
        console.log(resData);
        data.sysTenant = resData;
      };
      get();
      return { data };

      // const tenantStore = useTenantStore();
      // const { getTenantById } = useTenantStore();
      // const data = getTenantById(tenantId as unknown as number);
      // //做数据处理
      // let res = ref(data);
      // // async function get() {
      // //   const data = await sysTenantGetApi(tenantId);
      // //   return data;
      // // }
      // console.log(res.value.name);
      // let data = reactive({
      //   t: u,
      // });

      // const getData = async function () {
      //   data.t = await sysTenantGetApi(tenantId);
      // };
      // getData();
      // return { data, sysTenant };
    },
  });
</script>
